<template>
  <div class="page-miH page-bgBack pb32">
    <a-form :form="form" class="forms pt32">
      <a-form-item label="发薪批次名称">
        <a-input
          placeholder="请输入"
          :maxLength="50"
          v-decorator="['orderTitle', { rules: [{ required: true, message: '发薪批次名称不能为空' }] }]"
        />
      </a-form-item>
      <a-form-item label="到账方式" style="margin-top: -8px">
        <a-select
          v-decorator="[
            'type',
            {
              rules: [
                {
                  required: true,
                  message: '到账方式不能为空'
                }
              ]
            }
          ]"
          placeholder="请选择"
        >
          <a-select-option :value="item.id" v-for="item in typeArr" :key="item.id">
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="选择用工单位" style="margin-top: -8px">
        <a-select
          show-search
          :filter-option="filterOption"
          v-decorator="[
            'companyId',
            {
              rules: [
                {
                  required: true,
                  message: '用工单位不能为空'
                }
              ]
            }
          ]"
          placeholder="请选择"
          @change="change"
        >
          <a-select-option :value="item.id" v-for="item in companyIdArr" :key="item.id">
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="选择发薪员工" style="margin-top: -8px" v-if="form.getFieldsValue(['companyId']).companyId">
        <div class="qy">
          <!-- <a-input v-decorator="['empCompanyIdsInput', { rules: [{ required: true, message: '发薪员工不能为空' }] }]" v-show="false" /> -->
          <a-button class="mt4 mr12" @click="selectScopeVisible = true"> 选择人员 </a-button>
          <div class="yxz" style="display: flex; align-items: center; flex-wrap: wrap" v-if="selectedListTemp.length > 0">
            已选择
            <span v-for="(item, index) in selectedListTemp" :key="index">
              <span v-if="index < 3"> {{ item.name }} <span v-if="index !== selectedListTemp.length - 1"> 、</span> </span>
            </span>
            <span v-if="selectedListTemp.length > 2">
              等 <span class="icon-color">{{ selectedListTemp.length }}</span> 人
            </span>
          </div>
          <span v-else>当前未选择</span>
        </div>
      </a-form-item>
      <a-form-item label="备注" style="margin-top: -8px">
        <a-textarea placeholder="请输入" :auto-size="{ minRows: 2, maxRows: 15 }" v-decorator="['remark']" />
      </a-form-item>
      <a-form-item>
        <a-button type="primary" @click="handleOk"> 提交 </a-button>
      </a-form-item>
      <selectScope
        :companyId="form.getFieldsValue(['companyId']).companyId"
        :visible.sync="selectScopeVisible"
        :selectedList="selectedListTemp"
        @upDate="upDate"
      />
    </a-form>
  </div>
</template>

<script>
import moment from "moment";
import selectScope from "./selectScope";
import { getCompanyUnits, postSaveBatchAndDetail } from "../api";
export default {
  components: { selectScope },
  data() {
    return {
      confirmLoading: false,
      form: this.$form.createForm(this, {}),
      selectScopeVisible: false,
      selectedListTemp: [],
      companyIdArr: [],
      typeArr: [
        { id: 1, name: "支付宝" },
        { id: 2, name: "微工卡" },
        { id: 3, name: "银行卡" }
      ]
    };
  },
  created() {
    this.onGetCompanyUnits();
  },
  methods: {
    moment,
    async onGetCompanyUnits() {
      try {
        const { data } = await getCompanyUnits({
          pageNo: 1,
          pageSize: 1000
        });
        this.companyIdArr = data;
      } catch (err) {
        console.log("error log --> ", err);
      }
    },
    async onPostSaveBatchAndDetail(v) {
      try {
        this.confirmLoading = true;
        const { data } = await postSaveBatchAndDetail(v);
        this.confirmLoading = false;
        this.$notification.success({ message: "操作成功" });
        if (data.failTransferAccountsDetailAddDTOList.length > 0) {
          sessionStorage.setItem("paySalaryInfoId", data.transferAccountsBatchVO.id);
          sessionStorage.setItem("dataType", data.transferAccountsBatchVO.type);
          this.$emit("upData", data.failTransferAccountsDetailAddDTOList);
        } else {
          this.$router.replace({
            name: "applyForInfo",
            query: { id: data.transferAccountsBatchVO.id, dataType: data.transferAccountsBatchVO.type }
          });
        }
      } catch (err) {
        console.log("error log --> ", err);
        this.confirmLoading = false;
      }
    },
    handleOk() {
      this.form.validateFields((err, values) => {
        if (!err) {
          let companyName = "";
          this.companyIdArr.map(e => {
            if (e.id === values.companyId) companyName = e.name;
          });
          const selectedListTemp = JSON.parse(JSON.stringify(this.selectedListTemp));
          selectedListTemp.map(e => {
            delete e.name;
            delete e.isSelected;
          });
          const json = {
            transferAccountsBatchAddDTO: {
              companyId: values.companyId,
              orderTitle: values.orderTitle,
              companyName,
              type: values.type,
              remark: values.remark
            },
            type: values.type,
            transferBuildDetailAddVOList: selectedListTemp
          };

          this.onPostSaveBatchAndDetail(json);
        }
      });
    },
    upDate(e) {
      this.selectedListTemp = e;
      setTimeout(() => {
        this.form.setFieldsValue({
          empCompanyIdsInput: e.length > 0 ? "empCompanyIdsInput" : ""
        });
      });
    },
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0;
    },
    change() {
      this.selectedListTemp = [];
    }
  }
};
</script>

<style lang="scss" scoped>
.forms {
  width: 400px;
  margin: 0 auto;
  ::v-deep .ant-form-item-label > label {
    font-weight: normal !important;
    color: #55565d !important;
  }
  ::v-deep #remark {
    height: 80px !important;
  }
}
.qy {
  display: flex;
  margin-left: 6px;
  .yxz {
    width: 700px;
    max-height: 150px;
    margin-left: 10px;
    overflow: auto;
    line-height: 20px;
  }
  .icon-color {
    color: var(--primary);
    font-weight: bold;
  }
}
</style>
